<template>
	<!-- 我的/个人空间 -->
	<view class="user-space h-screen">

		<!-- 导航栏 -->
		<top-navbbar :user="{avatar:user.avatar,name:user.name}" :background="{background:'#0093dd'}" color="#fff"
			:operation="{icon:'grid',iconShow:showTool,buttonShow:false}" :borderBottom="false" :scroll="pageScroll"
			 @operationIcon="showPopup = true"></top-navbbar>

		<scroll-view scroll-y="true" style="max-height: 100vh;" :refresher-enabled="refresher" :refresher-triggered="triggered"
			@refresherrefresh="refresh()" @scrolltolower="reachBottom()" @scroll="scroll">
			<view class="user-top">
				<!-- 头像栏 -->
				<view class="header flex items-center  pb-20">
					<u-avatar class="header-img" :src="imageUrl(user.avatar)" size="large"></u-avatar>
					<view class="pl-30 flex-1 ">
						<view class="flex items-center mb-20">
							<view class="flex-1 flex flex-col">
								<text class="text-38 ">{{user.name}}</text>
								<text class="info-text">账号：{{user.userName}}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 签名 -->
				<view class="pb-20  flex-row">
					<text class=" text-26 introduce ">你的倒影是我带不走的风景，就像居无定所的云还在旅行！</text>
				</view>
				<view class="pb-20 user-bottom-box " v-if="user.roleKey === 'operatorUser'">
					<view class="official">
						<view class="circular-box">
							<image class="official-imgae" :src="'/static/aidex/images/official.png'"></image>
						</view>
						<view style="margin-left: 5rpx;">官方认证：地区运营</view>
					</view>
				</view>
				<view class="pb-20  flex-row border-b">
					<view class="flex-col">
						<text class="font-bold text-32" style="margin-right: 5rpx;">{{user.publishPostNumber}}</text>
						<text class="text-26  mr-20">帖子</text>
						<text class="font-bold text-32" style="margin-right: 5rpx;">{{user.publishCommentNumber}}</text>
						<text class="text-26  mr-20">评论</text>
						<text class="font-bold text-32" style="margin-right: 5rpx;">{{user.beLikeNumber}}</text>
						<text class="text-26 ">获赞</text>
					</view>
				</view>
			</view>

			<!-- 标签切换 -->
			<u-sticky bgColor="#fff" :enable="enable">
				<view class="nav-center">
					<view :class="{'active':tabIndex === index}" @click="changeTab(index)"
						v-for="(item,index) in tabList" :key="index">
						<view class="nav-title">
							{{item.name}}
						</view>
					</view>
				</view>
			</u-sticky>

			<!-- 列表内容 -->
			<view class="h-screen">
				<template v-if="tabIndex === 0">
					<view v-if="postList.length>0">
						<!-- 资讯列表 -->
						<user-post :list="postList"></user-post>
						<u-loadmore :status="loadStatus"></u-loadmore>
					</view>
					<view v-else>
						<u-empty text="本来无一物,何处惹尘埃" src="/static/platform/svg/winter.svg" font-size="32" icon-size="320"
							mode="list"></u-empty>
					</view>
				</template>
				<template v-if="tabIndex === 1">
					<view v-if="commentList.length>0">
						<!-- 评论列表 -->
						<user-comment :commentList="commentList"></user-comment>
						<u-loadmore :status="loadStatus"></u-loadmore>
					</view>
					<view style="margin-top: 200rpx;" v-else>
						<u-empty text="暂无评论" mode="message"></u-empty>
					</view>
				</template>
			</view>

		</scroll-view>
		<!-- <view> -->
		<view v-if="showTool" style="height: 100rpx;"></view>
		<view v-else style="height: 50rpx;"></view>
		<!-- 操作栏 -->
		<view v-if="showTool" class="buttom-tool">
			<view class="chat-btn"><u-button type="primary" :plain="true" @click="goChat(user.id)">聊天</u-button></view>
			<view class="follow-btn"><u-button type="primary"><u-icon name="plus" size="30"
						style="margin-right: 5rpx;"></u-icon>关注</u-button></view>
		</view>


		<!-- 顶部弹窗 -->
		<u-popup v-model="showPopup" mode="bottom" border-radius="30">
			<view class="operation-tool">
				<view class="head-title">管理</view>
				<view class="operation-bottom">
					<view class="operation-item" @click="popupHandle('friend')">
						<view class="circular-box">
							<u-icon class="circular-icon" name="minus-people-fill" size="38"></u-icon>
						</view>
						<view class="item-text">拉黑</view>
					</view>
					<view class="operation-item" @click="popupHandle('report')">
						<view class="circular-box">
							<u-icon class="circular-icon" name="warning" size="38"></u-icon>
						</view>
						<view class="item-text">举报</view>
					</view>
				</view>
				<view class="cancel" @click="showPopup=false">取消</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import UserPost from '@/pages/platform/post/user-post.vue'
	import UserComment from '@/pages/platform/comment/user-comment.vue'
	export default {
		components: {
			UserPost,
			UserComment
		},
		data() {
			return {
				showPopup: false,
				// 是否开启吸顶功能  
				enable: true,
				// 导航标签
				tabIndex: 0,
				tabList: [{
						name: "帖子",
						loadStatus: 'loadmore'
					},
					{
						name: "评论",
						loadStatus: 'loadmore'
					}
				],
				postQueryParam: {
					pageNo: 0,
					pageSize: 10,
					userId: undefined
				},
				commentQueryParam: {
					pageNum: 1,
					pageSize: 10,
					userId: undefined
				},
				userId: undefined,
				user: {},
				postList: [],
				commentList: [],
				showTool: true,
				triggered: false,
				refresher: true,
				pageScroll: 0,
			}
		},
		computed: {
			loadStatus() {
				return this.tabList[this.tabIndex].loadStatus
			}
		},
		onLoad(options) {
			this.userId = this.postQueryParam.userId = this.commentQueryParam.userId = options.uid;
			this.showTool = this.vuex_user.id !== options.uid
			this.init()
		},
		onShow() {
			this.enable = true
		},
		onHide() {
			this.enable = false
		},
		methods: {
			scroll(e) {
				this.pageScroll = e.detail.scrollTop
			},
			reachBottom() {
				if (this.tabIndex === 0 && this.tabList[0].loadStatus !== 'nomore') {
					this.getNextPostList()
				} else if (this.tabIndex === 1 && this.tabList[1].loadStatus !== 'nomore') {
					this.getNextCommentList()
				}
			},
			resetQuery() {
				this.postQueryParam.pageNo = 0
				this.commentQueryParam.pageNum = 1
				this.init()
			},
			// 下拉刷新
			refresh() {
				this.triggered = true
				this.resetQuery()
				setTimeout(() => {
					// 停止下拉刷新
					this.triggered = false;
				}, 500)
			},
			goChat(uid) {
				uni.navigateTo({
					url: '/pages/platform/paper/chat?uid=' + uid
				});

			},
			init() {
				this.getUserInfo()
				this.getPostList()
				this.getCommentList()
			},
			getUserInfo() {
				this.$u.api.user.getInfoByUserId({
					userId: this.userId
				}).then(res => {
					this.user = res.data
					uni.setNavigationBarTitle({
						title: this.user.name
					})
				})
			},
			getCommentList() {
				this.tabList[1].loadStatus = 'loading'
				this.$u.api.commentData.userCommentList(this.commentQueryParam).then(res => {
					this.commentList = res.data.rows
					if (res.data.total === this.commentQueryParam.pageSize) {
						this.tabList[1].loadStatus = "nomore"
					} else {
						this.setLoadStatus(1, this.commentList.length, this.commentQueryParam)
					}

				})
			},
			getNextCommentList() {
				this.commentQueryParam.pageNum += 1
				this.$u.api.commentData.userCommentList(this.commentQueryParam).then(res => {
					if (res.data.rows.length > 0) {
						this.commentList.push(...res.data.rows)
						setTimeout(() => {
							this.setLoadStatus(1, res.data.rows.length, this.commentQueryParam)
						}, 1000)

					} else {
						setTimeout(() => {
							this.tabList[1].loadStatus = "nomore"
						}, 1000)

					}
				})
			},
			getNextPostList() {
				this.postQueryParam.pageNo += 1
				this.$u.api.postData.getPostList(this.postQueryParam).then(res => {
					if (res.data.records.length > 0) {
						this.postList.push(...res.data.records)
						setTimeout(() => {
							this.setLoadStatus(0, res.data.records.length, this.postQueryParam)
						}, 1000)
					} else {
						setTimeout(() => {
							this.tabList[0].loadStatus = "nomore"
						}, 1000)

					}
				})
			},
			getPostList() {
				this.tabList[0].loadStatus = 'loading'
				this.$u.api.postData.getPostList(this.postQueryParam).then(res => {
					this.postList = res.data.records
					this.setLoadStatus(0, this.postList.length, this.postQueryParam)
				})
			},
			setLoadStatus(index, size, queryParam) {
				if (size < queryParam.pageSize) {
					this.tabList[index].loadStatus = "nomore"
				} else {
					this.tabList[index].loadStatus = 'loadmore'
				}
			},
			imageUrl(itemUrl) {
				return this.handleUrl(itemUrl)
			},
			// tabbar点击
			changeTab(index) {
				this.tabIndex = index
				this.swiperIndex = index
			},
			// 关注
			popupHandle(item) {
				this.showPopup = false
			},

		}
	}
</script>

<style lang="scss" scoped>
	.user-space {

		.grid-button {
			color: #fff;
			margin-right: 20rpx;
		}

		.user-top {
			padding: 0 30rpx;
			background-color: #0093dd;
			color: #fff;

			.header {
				position: relative;

				.info-text {
					margin-top: 10rpx;
				}
			}

			.user-bottom-box {
				display: flex;
				flex-wrap: wrap;

				.official {
					display: flex;
					background: #399cdd;
					padding: 10rpx;
					font-size: 13px;
					line-height: 20px;

					.circular-box {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 35rpx;
						height: 35rpx;
						margin: 5rpx;
						background-color: #ffffff;
						border-radius: 50%;

						.official-imgae {

							width: 14px;
							height: 14px;

						}
					}

				}
			}

		}


		.nav-center {
			height: 80rpx;
			text-align: center;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			background-color: #fff;

			.nav-title {
				height: 80rpx;
				line-height: 80rpx;
				flex: 1;
				font-size: 30rpx;
				font-weight: bold;
				color: $uni-text-color-gray;
			}

			.active {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;

				.nav-title {
					border-bottom: 3px solid $uni-color-blue;
					display: inline;
					padding-bottom: 2rpx;
					margin-bottom: 5rpx;
					color: $uni-color-blue;
				}
			}

		}



		.buttom-tool {
			display: flex;
			align-items: center;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 20rpx;
			background-color: #fff;
			z-index: 999;
			border-top: 1px solid #eee;

			.chat-btn {
				flex: 1;
			}

			.follow-btn {
				flex: 2;
				margin-left: 30rpx;
			}

		}
	}

	.operation-tool {

		.head-title {
			padding: 20rpx;
			padding-bottom: 0;
			font-size: 14px;
		}

		.operation-bottom {
			padding: 20rpx;
			color: #999;
			display: inline-flex;

			.operation-item {
				margin-right: 50rpx;

				.circular-box {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 72rpx;
					height: 72rpx;
					margin-top: 20rpx;
					margin-bottom: 10rpx;
					background-color: #f2f4f7;
					border-radius: 50%;

					.circular-icon {
						color: #000;
						display: flex;

					}
				}

				.item-text {
					display: flex;
					margin-left: 10rpx;
				}
			}

		}

		.cancel {
			padding: 20rpx;
			background-color: #f2f4f7;
			font-size: 16px;
			text-align: center;
		}
	}
</style>